<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

</head>

<body>
    <div id="app">
        <a style="position: absolute;z-index: 10; left: 10px;top:10px" href="/echarts/lj/index.html"><img
                src="./images/home.png" width="25" alt="" srcset=""></a>
        <div class="container">
            <div class="header" style="padding: 0">环保情况分析</div>
            <div class="main">
                <div class="left">
                    <div class="common-line flex-3">
                        <div class="comon-header">罗江区平均空气质量</div>
                        <div class="chart">
                            <div id="echarts_5" style="height: 100%; width: 100%;"></div>
                        </div>
                    </div>
                    <div class="common-line flex-4">
                        <div class="comon-header">企业空气质量排名
                        </div>
                        <div class="chart">
                            <div id="echarts_0" style="height: 100%; width: 100%;"></div>
                        </div>
                    </div>
                    <div class="common-line flex-3">
                        <div class="comon-header">主要污染源 </div>
                        <div class="chart">
                            <div id="echarts_1" style="height: 100%; width: 100%;"></div>
                        </div>
                    </div>

                </div>
                <div class="content flex direction">
                    <div class="common-line" style="position: absolute; top: 0;left:0; width: 200px; align-items: center; padding: 20px; font-size: 15px">重点关注企业分布</div>
                    <div class="flex-8" style="position: relative;">
                        <ul class="map-legend"></ul>
                        <div class="map" id="map" style="width: 100%;height: 100%;"></div>
                    </div>
                    <div class="common-line flex-2">
                        <div class="company" style=" padding-top: 1%;">重点关注企业平均空气质量 </div>
                        <div class="chart">
                            <div id="echarts_3" style="height: 100%; width: 100%;"></div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="common-line flex-3">
                        <div class="comon-header">各乡镇重点关注企业数量 </div>
                        <div class="chart">
                            <div id="echarts_4" style="height: 100%; width: 100%;"></div>
                        </div>
                    </div>
                    <div class="common-line flex-4">
                        <div class="comon-header">企业污水质量排名</div>
                        <div class="chart">
                            <div id="echarts_2" style="height: 100%; width: 100%;"></div>
                        </div>
                    </div>
                    <div class="common-line flex-3">
                        <div class="comon-header ">水质类别占比</div>
                        <div class="chart">
                            <div id="echarts_11" style="height: 100%; width: 100%;"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/echarts/js/const.js"></script>
    <script type="text/javascript" src="./js/echarts.min1.js"></script>
    <script src="./js/luojiang.js"></script>
    <script src="./js/echarts-wordcloud.min.js"></script>
    <script type="text/javascript">
     
        new Vue({
            el: '#app',
            data: {
                message: "123465",
                name: '罗江区应急隐患情况分析'
            },

            mounted() {
                console.log('挂载')
                this.drawLine() //水质类别统计
                this.echarts_0() // 重点关注企业空气质量排名Last10
                this.echarts_2() // 重点关注企业空气质量排名Last10
                this.echarts_3()
                this.echarts_4()
                this.echarts_5()
                this.map()
                this.drawMyCloud()
            },

            methods: {
                drawLine() {
                    let myChart = echarts.init(document.getElementById('echarts_11'))
                    const option = {
                        tooltip: {
                            show: true,
                            formatter: '{b} : ({d}%)'
                        },
                        legend: {
                            icon: 'circle',
                            itemWidth: 8,
                            bottom: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize: 10
                            },
                            data: ['I类', 'Ⅱ类', 'Ⅲ类', 'Ⅳ类', 'Ⅴ类']
                        },
                        color: ['#3f70ca', '#ed721f', '#a2a2a2', '#ffc606', '#64a1db'],
                        series: [
                            {
                                type: 'pie',
                                radius: '50%',
                                center: ['50%', '40%'],
                                selectedMode: 'single',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            color: '#fff',
                                            fontSize: 10,
                                            show: true,
                                            position: 'outer',
                                            formatter: '{d}%'
                                        }
                                    },
                                },
                                data: [
                                    { value: 0, name: 'I类' },
                                    { value: 26, name: 'Ⅱ类' },
                                    { value: 13, name: 'Ⅲ类' },
                                    { value: 15, name: 'Ⅳ类' },
                                    { value: 6, name: 'Ⅴ类' },
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    myChart.setOption(option)
                    window.addEventListener('resize', function () {
                        myChart.resize()
                    })
                },

                echarts_0() {
                    let myChart = echarts.init(document.querySelector("#echarts_0"))
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            formatter: '{b}：{c}mg/m3'
                        },
                        grid: {
                            left: 0,
                            top: 40,
                            right: 10,
                            bottom: 0,
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            max: 250,
                            splitLine: {
                                lineStyle: {
                                    color: "rgba(255,255,255,.1)"
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#bac0c0',
                                    fontWeight: 'normal',
                                    fontSize: 10,
                                },
                                interval:0,
                            },

                        },
                        yAxis: {
                            type: 'category',
                            data: ["金八角水泥", "金路树脂", "玻纤集团"].reverse(),
                            splitLine: {
                                lineStyle: {
                                    color: "rgba(255,255,255,.1)"
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#bac0c0',
                                    fontWeight: 'normal',
                                    fontSize: 10,
                                },
                                interval:0,
                            },
                            
                        },
                        series: [
                            {
                                type: 'bar',
                                barWidth: '50%',
                                data: [ 31.6,  61.7, 62.1].reverse(),
                                markLine: {
                                    symbol:"none",
                                    label:{
                                        show:true,
                                        silent:true,
                                        position: "end",
                                        formatter: '{b}：{c}mg/m3',
                                        fontSize: 12,
                                        color: 'red',
                                        textBorderColor: 'transparent',
                                    },
                                    lineStyle: {
                                        color: 'red',
                                    },
                                    data: [
                                        {name: '合格标准', xAxis: 175}
                                    ]
                                }
                            },
                        ]
                    }
                    myChart.setOption(option)
                    window.addEventListener("resize", function () {
                        myChart.resize()
                    })
                },

                echarts_2() {
                    let myChart = echarts.init(document.querySelector("#echarts_2"))
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            formatter: '{b}：{c}mg/m3'
                        },
                        grid: {
                            left: 0,
                            top: 40,
                            right: 10,
                            bottom: 0,
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            max: 35,
                            splitLine: {
                                lineStyle: {
                                    color: "rgba(255,255,255,.1)"
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#bac0c0',
                                    fontWeight: 'normal',
                                    fontSize: 10,
                                },
                                interval:0,
                            },

                        },
                        yAxis: {
                            type: 'category',
                            data: ["罗江区人民医院", "金路树脂", "周家坝污水处理厂", "红玉污水处理厂", "玻纤集团"].reverse(),
                            splitLine: {
                                lineStyle: {
                                    color: "rgba(255,255,255,.1)"
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#bac0c0',
                                    fontWeight: 'normal',
                                    fontSize: 10,
                                },
                                interval:0,
                            },
                        },
                        series: [
                            {
                                name: '2021年',
                                type: 'bar',
                                barWidth: '50%',
                                data:  [ 4,  4.4, 6, 6.8, 23.2].reverse(),
                                markLine: {
                                    symbol:"none",
                                    label:{
                                        show:true,
                                        silent:true,
                                        position: "end",
                                        formatter: '{b}：{c}mg/m3',
                                        fontSize: 12,
                                        color: 'red',
                                        textBorderColor: 'transparent',
                                    },
                                    lineStyle: {
                                        color: 'red',
                                    },
                                    data: [
                                        {name: '合格标准', xAxis: 25}
                                    ]
                                }
                            },
                        ]
                    };
                    myChart.setOption(option)
                    window.addEventListener("resize", function () {
                        myChart.resize()
                    })
                },

                drawMyCloud() {
                    let myChart = echarts.init(document.querySelector("#echarts_1"))
                    let option = {
                        color:['#74A6F2', '#1CE7DC', '#F6B54B', '#EF702E', '#EC342F'],
                        series: [
                            {
                                type: 'wordCloud',
                                shape: 'ellipse',
                                gridSize: 8,
                                sizeRange: [10, 20],
                                drawOutOfBound: false,
                                layoutAnimation: true,
                                textStyle: {
                                    // fontFamily: 'sans-serif',
                                    // fontWeight: 'bold',
                                    color: function () {
                                        // Random color
                                        return 'rgb(' + [
                                            Math.round(Math.random() * 150),
                                            Math.round(Math.random() * 255),
                                            Math.round(Math.random() * 160)
                                        ].join(',') + ')';
                                    }
                                },
                                data: [
                                    {
                                        "name": "窑尾",
                                        "value": 196
                                    },
                                    {
                                        "name": "窑头",
                                        "value": 93
                                    },
                                    {
                                        "name": "废弃排放口",
                                        "value": 47
                                    },
                                    {
                                        "name": "废水总排口",
                                        "value": 32
                                    },
                                    {
                                        "name": "45T安装口",
                                        "value": 22
                                    },
                                    {
                                        "name": "接触池排放口",
                                        "value": 196
                                    },
                                    {
                                        "name": "磷",
                                        "value": 93
                                    },
                                    {
                                        "name": "PH",
                                        "value": 47
                                    },
                                    {
                                        "name": "氨氮",
                                        "value": 32
                                    },
                                    {
                                        "name": "烟尘",
                                        "value": 22
                                    },
                                    {
                                        "name": "二氧化硫",
                                        "value": 22
                                    },
                                ],
                            }
                        ]
                    }
                    myChart.setOption(option)
                    window.addEventListener("resize", function () {
                        myChart.resize()
                    })
                },


                echarts_4() {
                    let myChart = echarts.init(document.querySelector("#echarts_4"))
                    let option = {
                        tooltip: {
                            trigger: 'axis',
                            formatter: '{b}：{c}个'
                        },
                        grid: {
                            top: 10,
                            left: '3%',
                            right: '4%',
                            bottom: 0,
                            containLabel: true,
                        },
                        xAxis: {
                            type: 'category',
                            data: ['万安', '金山', '白马关', '新盛', '焉家', '略平', '调元'],
                            axisLabel: {
                                textStyle: {
                                    color: '#bac0c0',
                                    fontWeight: 'normal',
                                    fontSize: 10,
                                },
                                interval:0,
                            },
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: {
                                lineStyle: {
                                    color: "rgba(255,255,255,.1)"
                                }
                            },
                            min: 0,
                            max: 30,
                            interval: 7,
                            axisLabel: {
                                textStyle: {
                                    color: '#bac0c0',
                                    fontWeight: 'normal',
                                    fontSize: 10,
                                },
                                interval:0,
                            },
                        },
                        series: [{
                            data: [5, 9, 5, 9, 8, 15, 23],
                            type: 'bar',
                            barWidth: '50%',
                            showBackground: false,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }]
                    };
                    myChart.setOption(option);
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    })
                },

                map() {
                    let myChart = echarts.init(document.querySelector("#map"))
                    echarts.registerMap('LJ', mapJson);
                    let itemStyle = {
                        normal: {
                            borderColor: '#7AF1F0',
                            borderWidth: 1,
                            shadowColor: '#7AF1F0',
                            shadowBlur: 3,
                            areaColor: 'rgba(120,152,225, 0.05)',
                        },
                        emphasis: {
                            areaColor: 'rgba(120,152,225, 0.1)'
                        },
                        zoom: 1.2
                    }
                    // let color = ["#ED5454", "#ED5454", "#ED5454", "#ED5454"]
                   
                    var markPointData = [{
                        name: "罗江区新盛在天然气管理站",
                        coord: [
                            104.640269, 31.271009  //坐标，通过百度地图提取
                        ],
                        itemStyle: {
                            normal: {
                                color: colors.zdqy
                            }
                        },
                        address: '天星村七组',

                        
                        effect: {
                            show: true,
                            shadowBlur: 0
                        },
                    }, {
                        name: "德阳罗江兴能天然气有限公司",
                        coord: [
                            104.5016649, 31.2950279
                        ],
                        itemStyle: {
                            normal: {
                                color: colors.zdqy
                            }
                        },
                        address: '罗江区黎明南路6号',

                        
                        effect: {
                            show: true,
                            shadowBlur: 0
                        },
                    }, {
                        name: "四川石化江城燃气有限公司",
                        coord: [
                            104.547207, 31.305981
                        ],
                        itemStyle: {
                            normal: {
                                color: colors.zdqy
                            }
                        },
                        address: '罗江区鄢家镇七里村五组',

                        
                    }, {
                        name: "罗江同辉燃气工程有限公司",
                        coord: [
                            104.516076, 31.297624
                        ],
                        itemStyle: {
                            normal: {
                                color: colors.zdqy
                            }
                        },
                        address: '罗江区狮峰路51号',
                        // 标注图片地址路径

                        
                    }, {
                        name: "罗江县龙洲天然气有限责任公司",
                        coord: [
                            104.541587, 31.38406
                        ],
                        itemStyle: {
                            normal: {
                                color: colors.zdqy
                            }
                        },
                        address: '金山镇工业园区邛海路',
                        // 标注图片地址路径
                        
                    }


                    ];
                    myChart.setOption(option = {

                        title: {
                            text: '',
                            color: '#fff',
                            x: '20px',
                            y: '20px',
                            // subtext: '人口密度数据来自Wikipedia',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}<br/>'
                        },

                        geo: {
                            show: true,
                            map: 'LJ',
                            label: {
                                emphasis: {
                                    show: false
                                }
                            },
                            roam: false,
                            itemStyle: {
                                normal: {
                                    borderColor: '#4085d3',
                                    // borderWidth: 1.5,
                                    // shadowColor: '#000',
                                    // shadowBlur: 50,
                                    areaColor: 'rgba(120,152,225, 0.00',
                                },
                                emphasis: {
                                    // areaColor: '#4f92fa'  //鼠标移上每一省份的颜色
                                    areaColor: 'rgba(120,152,225, 0.1)',
                                },
                            }
                        },

                        series: [
                            {
                                type: 'map',
                                mapType: 'LJ', // 自定义扩展图表类型
                                label: {
                                    show: true,
                                    color: '#fff'
                                },
                                markPoint: { //图表标注。
                                    symbolSize: window.subSymbolSize,
                                    symbol: window.symbolPath,
                                    symbolOffset: [0, '-50%'],
                                    data: markPointData
                                },
                                itemStyle: itemStyle,
                            }
                        ]
                    })
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    })
                    myChart.on('click', function (params) { //点击事件
                        if (params.componentType === 'markPoint') {

                        } else {

                        }
                    })
                },

                echarts_3() {
                    let myChart = echarts.init(document.querySelector("#echarts_3"));
                    let color = ['#4472c4', '#ed7d31', '#a5a5a5', '#ffc000', '#5b9bd5'];
                    const option = {
                        color: color,
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                let str = params[0].name + '<br/>'
                                params.forEach((item) => {
                                    str +=
                                        item.marker +
                                        item.seriesName +
                                        '：' +
                                        item.value +
                                        'mg/m3<br/>'
                                })
                                return str
                            },
                        },
                        legend: {
                            top: 0,
                            icon: 'rect',
                            right: 0,
                            itemWidth: 6,
                            itemHeight: 6,
                            itemGap: 10,
                            data: ['二氧化硫', '二氧化氮', '臭氧'],
                            textStyle: {
                                color: '#fff',
                                fontSize: '10'
                            }
                        },
                        grid: {
                            top: '20%',
                            left: 0,
                            right: '3%',
                            bottom: 0,
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['2019年', '2020年', '2021年'],
                            axisLabel: {
                                textStyle: {
                                    color: '#bac0c0',
                                    fontWeight: 'normal',
                                    fontSize: 10,
                                },
                                interval: 0,
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        yAxis: {
                            // min: 0,
                            // max: 320,
                            // interval: 160,
                            type: 'value',
                            axisLabel: {
                                textStyle: {
                                    color: '#bac0c0',
                                    fontWeight: 'normal',
                                    fontSize: 10,
                                },
                                interval: 0,
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        series: [
                            {
                                name: '二氧化硫',
                                type: 'line',
                                stack: '总量',
                                data: [221, 313, 315]
                            },
                            {
                                name: '二氧化氮',
                                type: 'line',
                                stack: '总量',
                                data: [280, 221, 122]
                            },
                            {
                                name: '臭氧',
                                type: 'line',
                                stack: '总量',
                                data: [251, 241, 265]
                            }
                        ]
                    };
                    myChart.setOption(option);
                    // myChart5.setOption(option);
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    })
                },

                echarts_5() {
                    let myChart = echarts.init(document.querySelector("#echarts_5"))
                    let color = ['#4472c4', '#ed7d31', '#a5a5a5', '#ffc000', '#5b9bd5']
                    const option = {
                        color: color,
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                let str = params[0].name + '<br/>'
                                params.forEach((item) => {
                                    str +=
                                        item.marker +
                                        item.seriesName +
                                        '：' +
                                        item.value +
                                        'mg/m3<br/>'
                                })
                                return str
                            },
                        },
                        legend: {
                            top: 0,
                            icon: 'rect',
                            right: 0,
                            itemWidth: 6,
                            itemHeight: 6,
                            itemGap: 10,
                            data: ['二氧化硫', '二氧化氮', '臭氧'],
                            textStyle: {
                                color: '#fff',
                                fontSize: '10'
                            }
                        },
                        grid: {
                            top: '20%',
                            left: 0,
                            right: '3%',
                            bottom: 0,
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['2019年', '2020年', '2021年'],
                            axisLabel: {
                                textStyle: {
                                    color: '#bac0c0',
                                    fontWeight: 'normal',
                                    fontSize: 10,
                                },
                                interval: 0,
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                textStyle: {
                                    color: '#bac0c0',
                                    fontWeight: 'normal',
                                    fontSize: 10,
                                },
                                interval: 0,
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        series: [
                            {
                                name: '二氧化硫',
                                type: 'line',
                                stack: '总量',
                                data: [221, 313, 315]
                            },
                            {
                                name: '二氧化氮',
                                type: 'line',
                                stack: '总量',
                                data: [280, 221, 122]
                            },
                            {
                                name: '臭氧',
                                type: 'line',
                                stack: '总量',
                                data: [251, 241, 265]
                            }
                        ]
                    }
                    myChart.setOption(option)
                    window.addEventListener("resize", function () {
                        myChart.resize()
                    })
                },

            }
        })

        let legends = [
            {color: colors.zdqy,name:'重点关注企业'},
        ]
        let li = '';
        for(let legend of legends){
            li+=' <li> <i class="color-icon" style="background-color: '+ legend.color +';"></i>'+ legend.name +'</li>'
        }
        document.querySelector(".map-legend").innerHTML=li;
    </script>
</body>

</html>
